<template>
    <el-dialog v-model="printPurchaseLabelVisible" :show-close="false" width="40%">
        <!-- 标题 -->
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">
                    采购标签
                    <el-text tag="b" type="primary">请使用10*10cm的标签纸</el-text>
                    --- ESC关闭
                </h4>
                <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
                    关闭
                </el-button>
            </div>
        </template>
        <!-- 打印内容 -->
        <div v-if="printPurchaseLabelData.productName !== ''" class="print-content">
            <!-- 表单 -->
            <table id="print-purchase-table">
                <tbody id="print-purchase-tbody">
                    <tr id="label-thead">
                        <th colspan="4">采购标签</th>
                    </tr>
                    <tr>
                        <th>供应商</th>
                        <td>{{ printPurchaseLabelData.supplierAbbreviation }}</td>
                        <th>客户</th>
                        <td>{{ printPurchaseLabelData.customerAbbreviation }}</td>
                    </tr>
                    <tr>
                        <th>产品名称</th>
                        <td>{{ printPurchaseLabelData.productName }}</td>
                        <th>规格</th>
                        <td>{{ printPurchaseLabelData.size }}</td>
                    </tr>
                    <tr>
                        <th>订单号</th>
                        <td>{{ printPurchaseLabelData.orderNo }}</td>
                        <th>送货计划</th>
                        <td>
                            {{ formatOrderDeliveryDate(printPurchaseLabelData.orderDeliveryDate) }}
                        </td>
                    </tr>
                    <tr>
                        <th>采购数量</th>
                        <td>{{ printPurchaseLabelData.purchaseNumber }}</td>
                        <th>来料数量</th>
                        <td></td>
                    </tr>
                    <tr>
                        <th colspan="1">码放备注</th>
                        <td colspan="3" id="storage-remarks-container">
                            <textarea id="storage-remarks"></textarea>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- 打印按钮 -->
            <el-button class="w-32 mt-2" :icon="Printer" plain @click="print">打印</el-button>
        </div>
        <!-- 没有打印内容 -->
        <div v-if="printPurchaseLabelData.productName === ''" class="w-full flex items-center justify-center">
            <el-empty description="没有可有打印的标签。" />
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { CircleCloseFilled, Printer } from '@element-plus/icons-vue';
import printJS from 'print-js';
import { formatTimeZone } from '@utils/calculate';
import './printPurchaseLabel.css';

/* ******************************暴露给父组件的属性/方法****************************** */
// 打印采购标签的dialog开关
const printPurchaseLabelVisible = defineModel('printPurchaseLabelVisible', { type: Boolean, required: true });

// 父组件传入的采购单数据
interface PrintPurchaseLabelData {
    supplierAbbreviation: string;
    customerAbbreviation: string;
    size: string;
    productName: string;
    purchaseNumber: number;
    orderDeliveryDate: Date | string;
    orderNo: string;
    notes: string;
}
// 需要打印的订单数据
const printPurchaseLabelData = defineModel<PrintPurchaseLabelData>('printPurchaseLabelData', { required: true });

// 格式化交货日期
const formatOrderDeliveryDate = (date: string | Date | number) => {
    if (date == '暂无送货计划') {
        return '暂无送货计划';
    }
    if (date) {
        return formatTimeZone(date, 'YYYY-MM-DD');
    } else {
        return '无';
    }
};

// 打印采购标签
const print = () => {
    // 获取打印元素
    const printEl = document.getElementById('print-purchase-table');
    // 如果打印元素不存在，则返回
    if (!printEl) {
        ElMessage.error('打印失败');
        return;
    }
    // 打印标签
    printJS({
        printable: printEl,
        type: 'html',
        scanStyles: false,
        css: import.meta.env.VITE_APP_PRINT_PURCHASE_LABEL,
    });
};
</script>

<style scoped lang="scss">
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}

.print-content {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
}
</style>
